<template>
  <div class="page-container">
    <div class="nav">
      <h2>书城</h2>
    </div>
    <div class="book">
      <HomeBook :books="item" v-for="(item, index) in books" :key="index" @onclear="clear" ></HomeBook>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import HomeBook from "../components/HomeBook.vue";

const books = ref([]);

onMounted(() => {
  querybooks();
});

const querybooks = () => {
  fetch("http://localhost:3000/books")
    .then((res) => res.json())
    .then((data) => {
      books.value = data;
    });
};
const clear=(id)=>{
    books.value=books.value.filter((item)=>{
        return item.id!=id
    })
}
// const one = (id) => {
//     const selectedBook = books.value.find(item => item.id===id);
//   if(selectedBook) {
//         books.value = books.value.filter(item => item.id!==id);
//         books.value.unshift(selectedBook);
//     }
// };

</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.book {
  display: flex;
  margin-top: 5%;
  justify-content: center;
  flex-flow: row wrap;
  width: 30%;
}

.book > div {
  margin: 4px;
}

h2 {
  color: aliceblue;
  height: 60px;
  line-height: 60px;
  margin: 0; /* 移除默认的外边距 */
}

.nav {
  background-color: black;
  text-align: center;
  width: 100%;
}
</style>
